<template>
  <div class="movie-card" :style="cardStyle" @click="$emit('select', movie.id)">
    <div class="poster-wrap" :style="posterWrapStyle">
      <img
        v-if="movie.poster && !imgError"
        :src="movie.poster"
        :alt="movie.title"
        class="movie-poster"
        :style="posterImgStyle"
        @error="onImgError"
      />
      <div v-else class="poster-placeholder" :style="posterImgStyle">暂无图片</div>
    </div>
    <div class="movie-info">
      <div class="movie-title">{{ movie.title }}</div>
        <div class="movie-meta">
          <span class="movie-year" v-if="movie.year">{{ movie.year }}</span>
          <span class="dot" v-if="movie.year && movie.genres">•</span>
          <span class="movie-genres" v-if="movie.genres" :title="formatGenres(movie.genres)">{{ shortGenres(movie.genres) }}</span>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MovieCard',
  props: {
    movie: {
      type: Object,
      required: true
    },
    // 可配置卡片宽度与海报高度，便于不同页面微调布局
    cardWidth: {
      type: Number,
      default: 180
    },
    posterHeight: {
      type: Number,
      default: 240
    }
  },
  data() {
    return {
      imgError: false
    }
  },
  computed: {
    cardStyle() {
      const w = `${this.cardWidth}px`
      return { width: w, minWidth: w }
    },
    posterWrapStyle() {
      return { height: `${this.posterHeight}px` }
    },
    posterImgStyle() {
      return { height: `${this.posterHeight}px` }
    }
  },
  watch: {
    'movie.poster'() {
      // 当电影切换或海报更新时，重置错误状态
      this.imgError = false
    }
  },
  methods: {
    onImgError() {
      this.imgError = true
    },
    formatGenres(genres) {
      if (!genres) return ''
      if (Array.isArray(genres)) return genres.join(' / ')
      return String(genres).split('|').join(' / ')
    },
    shortGenres(genres) {
      const text = this.formatGenres(genres)
      return text.length > 28 ? text.slice(0, 27) + '…' : text
    }
  }
}
</script>

<style scoped>
.movie-card {
  background: #1c1c1c;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.3s;
  flex-shrink: 0;
  cursor: pointer;
}

.movie-card:hover {
  transform: translateY(-5px);
}

.poster-wrap { width: 100%; position: relative; }

.movie-poster {
  width: 100%;
  object-fit: cover; /* 保持比例裁切填充 */
}

.poster-placeholder {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
  color: #888;
  font-size: 14px;
}

.movie-info {
  padding: 12px;
}

.movie-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.movie-meta {
  font-size: 12px;
  color: #bbb;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.movie-year { color: #ddd; }
.dot { margin: 0 6px; color: #666; }
.movie-genres { color: #aaa; }

/* 已移除评分显示 */
</style>